<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Chapter 2: I Must Be Dreaming</title>

<link rel="shortcut icon" href="images/2reading.gif">
<link href="foti.css" rel="stylesheet" type="text/css">

<style type="text/css">

#canvas {
	margin: 10px auto 0 auto;
	border: 5px double #aa9e8c;
}

#bg, #char {display: none;}


.bubble 
{
margin: 330px 0 0 420px;
position: absolute;
width: 130px;
height: auto;
padding: 10px;
background: #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color: #000;
size: 14px;
}

.bubble:after 
{
content: "";
position: absolute;
top: 29px;
left: -11px;
border-style: solid;
border-width: 10px 11px 14px 0;
border-color: transparent #fff;
display: block;
width: 0;
z-index: 1;
}

</style>

<script type="text/javascript">
var vc, vctx, vi1, bgr;
	function init(){
		vc = document.getElementById("canvas");
		vctx = vc.getContext("2d"); 
		bgr = document.getElementById("bg");
		vctx.drawImage(bgr,0,0,800,600);
		vi1 = document.getElementById("char");
		setInterval("animation()",600);
	}

	var dax = 0; counter=0;
	function animation() {
		if (counter >= 2) counter = 0; 	else counter++;
		vctx.drawImage(bgr,0,0,800,600);
		vctx.drawImage(vi1,dax,0,250,400, 0,210, 250, 400);
		dax = 250 * counter;
	}
</script>

</head>

<body onload="init()">


	<h1>Figment of the Imagination</h1>
	<h2>Chapter 2: I Must Be Dreaming</h2>
	<h2>Scene 2: American Li-tortured</h2>


<center><img src="images/line divider.png" width=800 style="opacity: .7;"></center>

<div id="content">

<div class="bubble">
"Oh wow! What happened to this place?" 
</div>

<center><canvas id="canvas" width=800 height=600></canvas></center>
<img id="bg" src="images/ch2/entrance.png" width=800 height=600>
<img id="char" src="images/ch2/sideview.png">

<center><img src="images/photo.png" width=800 style="margin:-4px 0 0 0;"></center>

<div id="scenetext">
<p>
Her American Literature classroom was possibly the catastrophe's favorite spot. Book pages torn in 
every way, glass pieces scattered everywhere, chairs disintegrated. "Oh wow! What happened to this 
place?" The sky was getting darker, almost difficult to see.  
</p>

<center><img src="images/line divider.png" width=800 style="opacity: .7;"></center>
	
</div>

<div align="center" style="padding-bottom: 30px;">
<a href="Chapter2Scene1.jsp" title="School Disaster"><button id="button">BACK</button></a>
<a href="tableofcontent.jsp" title="Back to Table of Contents"><button id="button2">TABLE OF CONTENTS</button></a>
<a href="Chapter2Scene3.jsp" title="Chillin' Like A Villain"><button id="button">NEXT</button></a>
</div>

</div>


</body>
</html>

